<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Dashboard</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        .dashboard {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .header {
            text-align: center;
            margin-bottom: 30px;
        }
        .metrics {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        .metric-card {
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 4px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="dashboard">
        <div class="header">
            <h1>Product Performance Dashboard</h1>
            <p>Real-time metrics and analytics</p>
        </div>
        <div class="metrics">
            <div class="metric-card">
                <h3>Active Users</h3>
                <p>1,234</p>
            </div>
            <div class="metric-card">
                <h3>Revenue</h3>
                <p>$45,678</p>
            </div>
            <div class="metric-card">
                <h3>Conversion Rate</h3>
                <p>2.34%</p>
            </div>
        </div>
        <div class="recent-activity">
            <h2>Recent Activity</h2>
            <ul>
                <li>New feature deployed: Enhanced search</li>
                <li>Bug fix: Mobile navigation issue</li>
                <li>Performance improvement: Cache optimization</li>
            </ul>
        </div>
    </div>
</body>
</html>
